import React, { useState, useEffect } from 'react';
import {
  Chart,
  Point,
  Annotation,
  Axis,
  Coordinate,
  registerShape,
  Legend,
} from 'bizcharts';
import RightSecondTableModal from '../RightSecondTableModal';

// 自定义Shape 部分
registerShape('point', 'pointer', {
  draw(cfg, container) {
    const group = container.addGroup();

    const center = this.parsePoint({ x: 0, y: 0 }); // 获取极坐标系下画布中心点
    const start = this.parsePoint({ x: 0, y: 0.5 }); // 获取极坐标系下起始点

    const preAngle = this.preAngle || 0;

    const angle1 = Math.atan((start.y - center.y) / (start.x - center.x));
    const angle = (Math.PI - 2 * angle1) * cfg.points[0].x;

    this.preAngle = angle;

    return group;
  },
});

const data = [
  { type: '已入库', value: 29 },
  { type: '未入库', value: 10 },
];

const scale = {
  value: {
    min: 0,
    max: 1,
    tickInterval: 0.1,
    formatter: v => v * 100,
  },
  type: {
    alias: '地磅',
  },
};

function RightFirstChart() {
  const [data, setData] = useState([{ value: 0.6 }]);
  const [visible, setVisible] = useState(false);
  const startAngle = Math.PI / 2;
  const endAngle = startAngle + Math.PI * 2;

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <Chart
        height={250}
        data={data}
        scale={scale}
        autoFit
        padding={[50, 30, 0]}
        onGetG2Instance={c => {
          c.removeInteraction('legend-filter');
        }}
        onPlotClick={e => setVisible(true)}
      >
        <Legend
          custom={true}
          allowAllCanceled={true}
          position="right-top"
          items={[
            {
              value: '',
              name: '已入库:10',
              marker: {
                symbol: 'square',
                style: { fill: '#1890FF', r: 5 },
              },
            },
            {
              value: '',
              name: '应入库:29',
              marker: {
                symbol: 'square',
                style: { fill: '#CBCBCB', r: 5 },
              },
            },
          ]}
          title={{
            spacing: 10,
            text: '随手拍',
          }}
          offsetX={-5}
          offsetY={5}
        />
        <Coordinate
          type="polar"
          radius={0.75}
          startAngle={startAngle}
          endAngle={endAngle}
          rotate={-Math.PI}
        />
        <Axis
          name="value"
          line={null}
          visible={false}
          label={{
            offset: -36,
            style: {
              fontSize: 18,
              textAlign: 'center',
              textBaseline: 'middle',
            },
          }}
          grid={null}
        />
        <Point position="value*1" color="#1890FF" shape="pointer" />
        <Annotation.Arc
          start={[0, 1]}
          end={[1, 1]}
          style={{
            stroke: '#CBCBCB',
            lineWidth: 30,
            lineDash: null,
            lineCap: 'butt',
          }}
        />
        <Annotation.Arc
          start={[0, 1]}
          end={[data[0].value, 1]}
          style={{
            stroke: '#1890FF',
            lineCap: 'butt',
            lineWidth: 30,
            lineDash: null,
          }}
        />
        <Annotation.Text
          position={['50%', '52.5%']}
          content={`${Math.round(data[0].value * 100)}%`}
          style={{
            fontSize: 32,
            fontFamily: 'HelveticaNeue-Medium, HelveticaNeue',
            fontWeight: 'bold',
            color: '#2C3542',
            fill: '#262626',
            textAlign: 'center',
          }}
        />
      </Chart>

      <RightSecondTableModal visible={visible} handleCancel={handleCancel} />
    </>
  );
}

export default RightFirstChart;
